<template>
  <div class="content">
    <custom-form ref="form" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
  </div>
</template>

<script>
import { addDeviceData, updateDeviceData } from '@/api/system/device/management';
import { mapState } from 'vuex';
export default {
  name: 'ManagementFormBaseInfo',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
    formData: {
      type: Object,
      default: () => {},
    },
    dictMap: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 提交表单数据
      formModel: {
        pid: '',
        deviceTypeId: '',
        deviceTypeKey: '',
        deviceTypeName: '',
        sort: 0,
        num: '',
        remark: ''
      },
      // 表单配置项
      formItemConfig: [
        {
          label: '设备类型字符串',
          prop: 'deviceTypeKey',
          span: 24,
          labelWidth: '150px',
          clearable: true,
          disabled: true
        },
        {
          label: '设备类型名称',
          prop: 'deviceTypeName',
          span: 24,
          labelWidth: '150px',
          clearable: true
        },
        {
          label: '设备分类对应的数量',
          prop: 'num',
          span: 24,
          component:'el-input-number',
          labelWidth: '150px',
          clearable: true,
          min:0,
          disabled: true,
          controls: false
        },
        {
          label: '排序',
          prop: 'sort',
          span: 24,
          component:'el-input-number',
          labelWidth: '150px',
          clearable: true,
          min:0
        },
        {
          label: '备注',
          prop: 'remark',
          span: 24,
          labelWidth: '150px',
          clearable: true,
        },
      ],
      // 表单验证
      formRules: {
        deviceTypeKey: {
          required: true,
          message: '设备类型字符串',
          trigger: 'blur',
        },
        deviceTypeName: {
          required: true,
          message: '类型名称不能为空',
          trigger: 'blur',
        },
      },
      // 按钮切换数据
      btns:[1,0,0],
      btnActive: 0
    };
  },
  computed: {
    ...mapState('dialog', ['dialogTitles']),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        this.formModel = JSON.parse(JSON.stringify(this.formData));
      },
    },
    titleIndex: {
      handler() {
        this.formItemConfig.map((item) => {
          if (item.prop == "deviceTypeKey" || item.prop == "num") {
            if (this.titleIndex === "新增设备") {
              item.disabled = false;
            } else {
              item.disabled = true;
            }
          }
        });
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    getList() {
      this.$emit('getList');
    },
    cancel() {
      this.$emit('cancel');
      this.$refs["form"].toResetFields();
    },
    submitFrom() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.$utils.isNotEmpty(this.formModel.deviceTypeId)) {
            updateDeviceData(this.formModel).then(res => {
              if (200 === res.code) {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                });
                this.cancel();
                this.getList();
              }
            });
          } else {
            addDeviceData(this.formModel).then(res => {
              if (200 === res.code) {
                this.$message({
                  message: '添加成功',
                  type: 'success',
                });
                this.cancel();
                this.getList();
              }
            });
          }
        }
      });
    },
    // 切换内容
    changeDeviceForm(cur){
      this.btnActive = cur
    },
    // 切换按钮样式设置
    setActive(type) {
      return this.btnActive == type ? 'btn_group_active' : 'btn_group'
    }
  },
  components: {},
};
</script>

<style lang="less" scoped></style>
